<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="title">您的II类账号</view>
        <view class="title" style="color: #479EEE;display: flex">
            <image class="icon" src="/static/logo.png"></image>
            <view>{{userData.card2}}</view>
        </view>
        <view style="font-size: 28upx;line-height:70upx;padding-left:20upx;border-bottom: 1px solid rgba(227, 227, 227, 1);">已绑定的I类账户：</view>
        <view class="title" style="color: #479EEE;display: flex;justify-content:space-between" v-for="item in banks">
            <text>{{item.mediumId}}</text>
            <text @click="del(item.mediumId)">删除</text>
        </view>
        <button type="warn"  class="sub-button" @click="goUrl('bindCard')">
            添加银行卡
        </button>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    export default {
        components: {},
        data() {
            return {
                userData:JSON.parse(uni.getStorageSync('data')),
                height: uni.getSystemInfoSync().windowHeight,
                banks:[]
            }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            getData(){
                API.bankBindings({"targetId": this.userData.id,
                    "token": uni.getStorageSync('token')}).then(res=>{
                    if(res.status==200){
                        this.banks=res.banks
                    }
                })
            },
            del(card){
                uni.showModal({
                    title: '提示',
                    content: `确认删除？`,
                    success: (res)=> {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            API.bankUnbinding({
                                "bindCard": card,
                                "token": uni.getStorageSync('token')
                            }).then(res=>{
                                if(res.status==200){
                                    if(res.data.returnCode==0){
                                        uni.showToast();
                                    }else{
                                        uni.showModal({
                                            title: '提示',
                                            content: res.data.returnMsg,
                                            showCancel: false,
                                        });
                                    }
                                }else{
                                    uni.showModal({
                                        title: '提示',
                                        content: '请求失败',
                                        showCancel: false,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            goUrl(url){
                uni.navigateTo({
                    url: '../account/'+url
                });
            },
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }
    .title{
        background: white;
        color: #868686;
        line-height: 70upx;
        padding:0 20upx;
        font-size: 28upx;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .icon{
        width: 40upx;
        height: 40upx;
        margin: 15upx 20upx 0 0;
    }
    .but-wrap{
        display: flex;;
        flex-wrap: wrap;
    }
    button{
        width: 98%;
        margin-top:30upx;
        background: #D14F43;
        border-radius: 4upx;
    }
    .msg{
        font-size:32upx;
        color: #7f5734;
        padding: 20upx;
        margin-top: 40upx;
        border-top: 2px solid rgba(227, 227, 227, 1);
        border-bottom: 2px solid rgba(227, 227, 227, 1);
        background: -webkit-linear-gradient(#e5d7cb, white); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#e5d7cb, white); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#e5d7cb, white); /* Firefox 3.6 - 15 */
        background: linear-gradient(#e5d7cb, white); /* 标准的语法 */
    }
</style>
